<template>
  <div class="weather-icon-component">
    <i :class="iconClass"></i>
    <span v-if="showText" class="weather-text">{{ weatherText }}</span>
  </div>
</template>

<script>
export default {
  name: 'WeatherIcon',
  props: {
    // 图标代码，如'100'表示晴天
    code: {
      type: [String, Number],
      default: '999'  // 默认使用未知天气
    },
    // 天气文字描述
    text: {
      type: String,
      default: ''
    },
    // 是否是夜间天气图标
    isNight: {
      type: Boolean,
      default: false
    },
    // 图标尺寸：16, 32, 64, 128
    size: {
      type: [String, Number],
      default: 32,
      validator: (value) => {
        return ['16', '32', '64', '128', 16, 32, 64, 128].includes(value);
      }
    },
    // 是否显示天气文字
    showText: {
      type: Boolean,
      default: false
    },
    // 天气状况，用于备选（当没有code时）
    condition: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 计算图标类
    iconClass() {
      const sizeClass = this.size ? `qi-${this.size}` : '';
      
      // 如果直接提供了code
      if (this.code && this.code !== '999') {
        return `qi-${this.code} ${sizeClass}`;
      }
      
      // 如果有天气状况，根据映射转换
      if (this.condition) {
        return `${this.getWeatherIcon(this.condition)} ${sizeClass}`;
      }
      
      // 默认返回未知天气图标
      return `qi-999 ${sizeClass}`;
    },
    
    // 获取要显示的文字
    weatherText() {
      // 优先使用传入的文字
      if (this.text) {
        return this.text;
      }
      
      // 其次使用传入的天气状况
      if (this.condition) {
        return this.condition;
      }
      
      // 最后根据code获取对应的天气文字
      if (this.code && this.code !== '999') {
        return this.getWeatherTextByCode(this.code);
      }
      
      // 默认返回未知天气
      return '未知天气';
    }
  },
  methods: {
    // 根据天气状况获取图标
    getWeatherIcon(condition) {
      // 根据天气状况映射到和风天气图标代码
      const iconMap = {
        '晴': this.isNight ? 'qi-150' : 'qi-100',
        '多云': this.isNight ? 'qi-151' : 'qi-101',
        '少云': this.isNight ? 'qi-152' : 'qi-102',
        '晴间多云': this.isNight ? 'qi-153' : 'qi-103',
        '阴': 'qi-104',
        '阵雨': this.isNight ? 'qi-350' : 'qi-300',
        '强阵雨': this.isNight ? 'qi-351' : 'qi-301',
        '雷阵雨': 'qi-302',
        '强雷阵雨': 'qi-303',
        '雷阵雨伴有冰雹': 'qi-304',
        '小雨': 'qi-305',
        '中雨': 'qi-306',
        '大雨': 'qi-307',
        '极端降雨': 'qi-308',
        '毛毛雨': 'qi-309',
        '暴雨': 'qi-310',
        '大暴雨': 'qi-311',
        '特大暴雨': 'qi-312',
        '冻雨': 'qi-313',
        '小到中雨': 'qi-314',
        '中到大雨': 'qi-315',
        '大到暴雨': 'qi-316',
        '暴雨到大暴雨': 'qi-317',
        '大暴雨到特大暴雨': 'qi-318',
        '雨': 'qi-399',
        '小雪': 'qi-400',
        '中雪': 'qi-401',
        '大雪': 'qi-402',
        '暴雪': 'qi-403',
        '雨夹雪': 'qi-404',
        '雨雪天气': 'qi-405',
        '阵雨夹雪': this.isNight ? 'qi-456' : 'qi-406',
        '阵雪': this.isNight ? 'qi-457' : 'qi-407',
        '小到中雪': 'qi-408',
        '中到大雪': 'qi-409',
        '大到暴雪': 'qi-410',
        '雪': 'qi-499',
        '薄雾': 'qi-500',
        '雾': 'qi-501',
        '霾': 'qi-502',
        '扬沙': 'qi-503',
        '浮尘': 'qi-504',
        '沙尘暴': 'qi-507',
        '强沙尘暴': 'qi-508',
        '热': 'qi-900',
        '冷': 'qi-901',
        '未知': 'qi-999'
      };
      
      return iconMap[condition] || 'qi-999';
    },
    
    // 根据图标代码获取对应的天气文字
    getWeatherTextByCode(code) {
      const codeTextMap = {
        '100': '晴',
        '101': '多云',
        '102': '少云',
        '103': '晴间多云',
        '104': '阴',
        '150': '晴(夜间)',
        '151': '多云(夜间)',
        '152': '少云(夜间)',
        '153': '晴间多云(夜间)',
        '300': '阵雨',
        '301': '强阵雨',
        '302': '雷阵雨',
        '303': '强雷阵雨',
        '304': '雷阵雨伴有冰雹',
        '305': '小雨',
        '306': '中雨',
        '307': '大雨',
        '308': '极端降雨',
        '309': '毛毛雨',
        '310': '暴雨',
        '311': '大暴雨',
        '312': '特大暴雨',
        '313': '冻雨',
        '314': '小到中雨',
        '315': '中到大雨',
        '316': '大到暴雨',
        '317': '暴雨到大暴雨',
        '318': '大暴雨到特大暴雨',
        '350': '阵雨(夜间)',
        '351': '强阵雨(夜间)',
        '399': '雨',
        '400': '小雪',
        '401': '中雪',
        '402': '大雪',
        '403': '暴雪',
        '404': '雨夹雪',
        '405': '雨雪天气',
        '406': '阵雨夹雪',
        '407': '阵雪',
        '408': '小到中雪',
        '409': '中到大雪',
        '410': '大到暴雪',
        '456': '阵雨夹雪(夜间)',
        '457': '阵雪(夜间)',
        '499': '雪',
        '500': '薄雾',
        '501': '雾',
        '502': '霾',
        '503': '扬沙',
        '504': '浮尘',
        '507': '沙尘暴',
        '508': '强沙尘暴',
        '900': '热',
        '901': '冷',
        '999': '未知'
      };
      
      return codeTextMap[code] || '未知天气';
    }
  }
};
</script>

<style scoped>
.weather-icon-component {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.weather-text {
  font-size: 0.8em;
  margin-top: 4px;
  text-align: center;
}

/* 如果图标尺寸较大，适当增加文字大小 */
:deep(.qi-64) + .weather-text,
:deep(.qi-128) + .weather-text {
  font-size: 1em;
  margin-top: 8px;
}
</style>